<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<body>
<style>
    a{
        text-decoration: none; /*去下划线*/
        color: blue;
        font-size: 18px;
        font-weight: bold; /*字体加粗*/
        background: gray;
        width: 40px;
        height: 40px;
        display: inline-block;  /*变成块元素使宽高生效*/
        text-align: center;  /*水平居中*/
        line-height:  40px;  /*垂直剧中*/
        border-radius: 10px; /*圆角边框*/
    }
    /*属性选择器	功能描述*/
    /*E[attr]	选择匹配具有属性attr的E元素*/
    /*E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）*/
    /*E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串*/
    /*E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串*/
    /*E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配*/
    a[id]{
        background: yellow;
    }
    a[href="test"]{
        background: pink;
    }
    a[href^="http://"]{
        background: aqua;
    }
    a[href$="com"]{
        background: aqua;
    }
    a[href*="#"]{
        background: blueviolet;
    }
</style>
<a href="#" id="a1">1</a>
<a href="test">2</a>
<a href="#">3</a>
<a href="test">4</a>
<a href="http://www.baidu.com">5</a>
<a href="http://www.baidu.com">6</a>
<a href="www.baidu.com">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#" id="a2">10</a>
</body>
</html>